<template>
  <div class="recent-visits">
    <span class="title">最近访问</span>
    <div class="list" v-if="recentlyProduction.length">
      <products-item v-for="item in recentlyProduction" :data="item" :is-active="item.productionId === activeItem1"
        @close-drawer="props.closeDrawer" @set-visited="setVisited" @mouseenter="mouseMoves(item.productionId)"
        @mouseleave="activeItem1 = '-1'"></products-item>
    </div>
    <el-empty v-else description="暂无数据" :image-size="40" />
  </div>

  <div class="production-list">
    <prim-tab :tab-menu="tabData" :current-menu="currentMenu" @handle-click="handleUpdateCurrentMenu"></prim-tab>
    <div class="list" v-if="productsList.length">
      <products-item v-for="item in productsList" :data="item" :is-active="item.productionId === activeItem"
        @close-drawer="props.closeDrawer" @set-visited="setVisited" @mouseenter="mouseMove(item.productionId)"
        @mouseleave="activeItem = '-1'"></products-item>
    </div>
    <el-empty v-else description="暂无数据" :image-size="40" />
  </div>
</template>

<script lang="ts" setup>
import productionService from '@/api/productionService'
import { Production, TabMenuItem } from '@/types/public'
import { Search } from '@element-plus/icons-vue'
const searchKey = ref('')
const props = defineProps({
  closeDrawer: {
    type: Function
  }
})
let tabData = reactive<Array<TabMenuItem>>([])
const currentMenu = ref('tab0')
const handleUpdateCurrentMenu = (str: string) => {
  currentMenu.value = str
}

let productsList: Array<Production> = reactive([])
const activeItem = ref('-1')
const mouseMove = (num: string) => {
  activeItem.value = num
}

const activeItem1 = ref('-1')
const mouseMoves = (num: string) => {
  activeItem1.value = num
}

let arr: any = []
let recentlyProduction: Array<Production> = reactive([])
productionService.productionList({}).then((res) => {
  arr = res.data.data.productions
  setVisited('')
  tabData = arr.map((item: { titleName: any }, index: any) => {
    return { text: item.titleName, id: 'tab' + index }
  })
  productsList.length = 0
  productsList.push(...arr[0].production)
})

const setVisited = (productionId: string) => {
  recentlyProduction.length = 0
  let str = localStorage.getItem('setVisited') || ''
  str = productionId + ';' + str
  let temp = Array.from(new Set(str.split(';')))
  temp.length > 9 ? (temp.length = 9) : ''
  temp.forEach((item) => {
    for (const val of arr) {
      for (const child of val.production) {
        if (item === child.productionId) {
          recentlyProduction.push(child)
        }
      }
    }
  })
  localStorage.setItem('setVisited', temp.join(';'))
}

watch(
  () => currentMenu.value,
  (n) => {
    productsList.length = 0
    productsList.push(...arr[parseInt(n.replace('tab', ''))].production)
  }
)
</script>

<style lang="scss" scoped>
.recent-visits {
  .title {
    color: $text-color;
    font-weight: 700;
    font-size: 14px;
  }
}

.list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 22px;

  .products-item {
    margin-bottom: 10px;
  }

  & .products-item:nth-of-type(3n + 2) {
    margin: 0 40px;
  }
}

.production-list {
  .prim-tab {
    height: 40px !important;
    font-size: 14px !important;
    color: red;
  }

  :deep(.prim-tab .active) {
    color: $main-color !important;
  }
}
</style>
